<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 
      问题情景:
      当 data里的变量需要计算后的值?
        做法1 : 直接修改data里的变量
        做法2 : 函数 methods定义对应的函数
        做法3:  computed 计算属性 (非完整写法)
    -->

    <!-- 做法1  直接修改data  缺点 : 不能复用 -->
    <h2>全名是 {{firstName.toLowerCase()+' '+lastName.toLowerCase()}}</h2>
    <hr>
    <!-- 
      做法2 : 定义对应的函数 
      缺点: 频繁的调用函数 性能会差
     -->
    <h2>全名是 {{fullName1()}}</h2>
    <h2>全名是 {{fullName1()}}</h2>
    <h2>全名是 {{fullName1()}}</h2>
    <hr>
    <!-- 
      做法3  定义计算属性 computed
      计算属性可以按照属性的方式直接使用,不需要调用
      多次使用计算属性,只会在第一次使用的时候计算一次,然后把计算的结果缓存下来,随时可以取用
      只有在当前计算属性所依赖的数据发生变化以后,计算属性才会重新计算
    -->
    <h2>全名是{{fullName2}}</h2>
    <h2>全名是{{fullName2}}</h2>
    <h2>全名是{{fullName2}}</h2>

  </div>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#app",
      data () {
        return {
          firstName: "Wang",
          lastName: "Whongwang",
        };
      },
      methods: {
        fullName1 () {
          console.log("函数被调用");
          return (
            this.firstName.toLowerCase() + " " + this.lastName.toLowerCase()
          );
        },
      },
      computed: {
        fullName2 () {
          console.log("计算属性被调用");
          return (
            this.firstName.toLowerCase() + " " + this.lastName.toLowerCase()
          );
        }
      }
    });
  </script>
</body>

</html>